<template>
	<cl-dialog
		title="跟进记录"
		width="500px"
		:props="{
			top: '5vh',
			'append-to-body': true,
			'close-on-click-modal': false,
			'close-on-press-escape': false
		}"
		:visible.sync="visible"
		@close="close"
	>
		<div class="container">
			<div class="item" v-for="(item, index) in list" :key="index">
				<el-form label-width="120px">
					<el-form-item label="跟进时间：">{{ item.create_time }}</el-form-item>
					<el-form-item label="跟进图片：">
						<template v-if="item.check_images">
							<el-image
								class="img-item"
								v-for="(item, index) in item.check_images"
								:key="index"
								:src="item"
								:preview-src-list="item.check_images"
								:z-index="3000"
								fit="cover"
							/>
						</template>
						<span v-else>-</span>
					</el-form-item>
					<el-form-item label="跟进内容：">{{ item.check_content }}</el-form-item>
					<el-form-item label="跟进人：">{{ item.check_user_name }}</el-form-item>
				</el-form>
			</div>
		</div>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
	export default {
		name: "advice-history",
		data() {
			return {
				visible: false,
				list: []
			};
		},
		methods: {
			open(id) {
				this.getComplchecklog(id);
				this.visible = true;
			},
			close() {
				this.visible = false;
			},
			async getComplchecklog(id) {
				const res = await this.$service.aftersale.complchecklog({
					id
				});
				console.log(res);
				this.list = res;
			},
			isArr(val) {
				if (!Array.isArray(val)) {
					return val.split(",");
				}
				return val;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		max-height: 500px;
		overflow: auto;
		.item {
			border-bottom: 1px solid #eee;
			margin-bottom: 10px;
			&:last-child {
				border-bottom: none;
			}
		}
	}
	.title_tips {
		::v-deep {
			.el-form-item__label {
				font-weight: bold;
				margin-left: -14px;
			}
		}
	}
	::v-deep .border-top {
		border-top: 1px solid #f7f7f7;
	}
	.status_tips {
		span {
			color: #156DFF;
		}
	}
	.refimage {
		width: 50px;
		height: 50px;
		margin-right: 10px;
		margin-top: 10px;
	}
	::v-deep {
		.el-form-item {
			margin-bottom: 10px !important;
		}
	}
	.mes-list {
		list-style: none;
		padding-top: 6px;
		line-height: normal;
		li {
			color: #909399;
			& + li {
				margin-top: 10px;
			}
			.mes {
				color: #333;
			}
		}
	}
	.img-item {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		+ .img-item {
		}
		&:nth-child(3n + 3) {
			margin-right: 0px !important;
		}
	}
</style>
